<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisible"
            :width="width"
            title="新建（编辑）钉钉消息群"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            v-dialogDrag
            class="dialog-main"
            :modal='false'
            >
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="formName" label-width="80px" class="demo-ruleForm" size="mini" slot="center">
                    <el-form-item label="群id:" prop="id"> 
                        <el-input v-model="ruleForm.id" size="mini" :disabled="disableEdit" @change="changeID" ></el-input>
                    </el-form-item>
                    <el-form-item label="群名称:" prop="name"> 
                        <el-input v-model="ruleForm.name" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="状态:" prop="status"> 
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :label="0">{{M2('启用')}}</el-radio>
                            <el-radio :label="11">{{M2('禁用')}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="successDing('formName')" size="mini" type="primary">确 定</el-button>
                <el-button @click="closeCommonDialog()" size="mini">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { saveDingChatDef,getDingChatDefById } from '@/api/user.js'
import { trim } from '@/utils/tools.js';
export default {
    data(){
        return {
            dialogVisible: false,
            disableEdit: false,
            ruleForm:{},
            rules:{
                id: [
                    { required: true, message: this.M2('请填写群id！'), trigger: 'blur' },
                ],
                name: [
                    { required: true, message: this.M2('请填写群名称！'), trigger: 'blur' },
                ],
                status: [
                    { required: true, message: this.M2('请选择状态！'), trigger: 'blur' },
                ],
            },
        }
    },
    props:{
        titleText:{
            type:String,
            default:() => ('')
        },
        width:{
            type:String,
            default:() => ('40%')
        },
    },
    methods:{
        changeID(val){
            if(!val) return
            let param = {
                id:trim(val)
            }
            getDingChatDefById(param).then(res => {
                if(res.data){
                    this.$confirm((`已有数据是否要修改？`), { 
                        confirmButtonText: this.M2('确定'),
                        cancelButtonText: this.M2('取消'),
                        type: 'warning'
                    }).then(() => {
                        this.$set(this.ruleForm,'id',res.data.id)
                        this.$set(this.ruleForm,'name',res.data.name)
                        this.$set(this.ruleForm,'status',res.data.status)
                    }).catch(() => {
                        this.$set(this.ruleForm,'id',null)
                        return
                    })
                }
            })
        },
        successDing(formName){
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let param = {
                    id:trim(this.ruleForm.id),
                    name:this.ruleForm.name,
                    status:this.ruleForm.status
                }
                saveDingChatDef(param).then(res => {
                if(res.code == 200){
                    this.closeCommonDialog()
                    this.$message({
                        showClose: true,
                        message:'操作成功！',
                        offset:220,
                        duration: 2000,
                        type: 'success'
                    })
                    this.$emit('mainListList')
                }
            })
             } else {
                return false;
            }
        });
        },
        openCommonDialog(row){
            this.disableEdit = false
            if(row){
                this.ruleForm = {
                    id:row.id,
                    name:row.name,
                    status:row.status,
                }
                this.disableEdit = true 
            }else {
                this.$set(this.ruleForm,'id',null)
                this.$set(this.ruleForm,'name',null)
                this.$set(this.ruleForm,'status',null)
            }
            this.dialogVisible = true
        },
        closeCommonDialog(){
            this.$refs.formName.clearValidate()
            this.dialogVisible = false
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep.dialog-main{
    .el-dialog__header{
        border-bottom: 1px solid #ccc;
        padding: 10px !important;
        .el-dialog__title{
            font-weight: bold;
        }
    }
    .el-dialog__body{
        padding: 10px 20px 20px !important;
        overflow-y: auto;
    }
    
}
</style>